<template>
  <div class="shop">
    <div class="nav">
      <div class="top">
        <p>门店列表</p>
      </div>
      <div class="kuang"></div>
      <!-- <div class="examine"> -->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="门店">
            <el-input v-model="formInline.user" type="text" placeholder="门店名"></el-input>
          </el-form-item>
          
          <el-form-item label="服务范围">
            <el-select v-model="formInline.region" placeholder="活动区域">
              <el-option label="服务鞋帽" value="shanghai"></el-option>
              <el-option label="蔬菜水果" value="beijing"></el-option>
              <el-option label="早餐早点" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" v-model="key" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      <!-- </div> -->
      <!-- 按钮 -->
      <div class="btn">
        <el-row>
          <el-button type="danger" @click="delects">批量删除</el-button>
<!-- Form -->
<el-button type="primary" @click="dialogVisible = true">添加</el-button>
<el-dialog title="收货地址" :visible.sync="dialogVisible">
  <el-form :model="form">
    <div class="hrpoa">
    <div class="biaodan">  
    <el-form-item label="门店" :label-width="formLabelWidth">
      <el-input v-model="list.name" class="pors" autocomplete="off"></el-input>
    </el-form-item>
      <el-form-item label="手机号" :label-width="formLabelWidth">
      <el-input v-model="list.mobile" class="pors" autocomplete="off"></el-input>
    </el-form-item> 
    <div class="shijian">
      营业时间
       <el-time-select
          style="width:109px"
          placeholder="起始时间"
          v-model="list.startTime"
          :picker-options="{
            start: '08:30',
            step: '00:15',
            end: '18:30'}">
  </el-time-select>
     <el-time-select
        style="width:120px"
        placeholder="结束"
        v-model="list.endTime"
        :picker-options="{
        start: '08:30',
        step: '00:15',
        end: '18:30',
        minTime: startTime}">
  </el-time-select>
   </div>
    <el-form-item label="服务范围" :label-width="formLabelWidth">
      <el-select v-model="list.services" placeholder="请选择活动区域">
          <el-option label="服务鞋帽" value="shanghai"></el-option>
          <el-option label="蔬菜水果" value="beijing"></el-option>
          <el-option label="早餐早点" value="beijing"></el-option>
      </el-select>
    </el-form-item>
         <el-form-item label="店主" :label-width="formLabelWidth">
      <el-input v-model="list.username" class="porss" autocomplete="off"></el-input>
    </el-form-item>
     <el-form-item label="  门店介绍" :label-width="formLabelWidth">
      <el-input v-model="list.intro" class="pors" autocomplete="off"></el-input>
    </el-form-item>
     </div>
     <div class="nav-right">
      <el-form-item label="门店地址" :label-width="formLabelWidth">
          <el-input v-model="list.address" class="porss" autocomplete="off"></el-input>
    </el-form-item>
    <div class="imG"> 
     <el-upload
      class="avatar-uploader"
      action="https://jsonplaceholder.typicode.com/posts/"
      :show-file-list="false"
      
      v-model="list.intro"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload">
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
   </div>
     <el-form-item label="门店图片" :label-width="formLabelWidth">
      <el-input v-model="list.image" class="porss" autocomplete="off"></el-input>
    </el-form-item>
    </div>
    </div>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="getadd">确 定</el-button>
  </div>
</el-dialog>

        </el-row>
      </div>

      <div>
 <TableList
      :tableData="tableData"
      :tableHead="tableHead"
      @delect='delect'
      @handleCurrentChange='deletInBatches'
      @modification='modification'
      />
      
</div>
      
    </div>
  </div>
</template>
<script> 

// import axios from 'axios';

import {shop} from '../utils/utils'
import TableList from '.././tt/Table.vue'
import axios from 'axios';
import {getadd} from '../utils/utils'
// import { Select } from 'element-ui';
export default {
  components:{
      TableList
  },
    data() {
      return {
          key:'',
        tableHead:[
            {
            label:'ID',
            prop:'id'
           },
             {
            label:'门店',
            prop:'name'
           },
             {
            label:'地址',
            prop:'address'
           },
             {
            label:'门店logo',
            prop:'logo'
           },
             {
            label:'店主',
            prop:'username'
           },
             {
            label:'服务范围',
            prop:'services'
           },
             {
            label:'联系电话',
            prop:'mobile'
           },
             {
            label:'营业时间',
            prop:'startTime',
            // prop:'endTime'
           },
             {
            label:'操作',
            type:'button',
            button:{
              update:true,
              delete:true
            }
           },
        ],
       tableData: [],
      list:{
        id: "",
        name: "",
        mobile: "",
        pass: "",
        tel: "",
        logo: "",
        address: "",
        startTime: "",
        endTime: "",
        services: "",
        username: "",
        intro: "",
      },
        qwey:'',
        ids:[],
        imageUrl: '',
        startTime: '',
        endTime: '',
        handleAdd: false,
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        formLabelWidth: '120px',
        sels:[],
        dialogVisible: false,
        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4,
        formInline: {
          user: '',
          region: ''
        },
      }
    },
    methods: {
      // 修改
    async modification(val,data){
      console.log(data)
        this.dialogVisible= val
          if(val){
            this.dialogVisible=!!val
            if(this.dialogVisible){
              const res = this.tableData.find(item=>item.id == data.id)
              this.list = res
            }
          }
      },
      // 添加
      async getadd(){
        const data = await getadd({
            name:this.list.name,
            mobile:this.list.mobile,
            pass:this.list.pass,
            logo:this.list.logo,
            address:this.list.address,
            images:this.list.images,
            startTime:this.list.startTime,
            endTime:this.list.endTime,
            services:this.list.services,
            username:this.list.username,
            intro:this.list.intro
        });
      if(data.errCode == 10000){
            // console.log(data.errCode)
            this.$message({
              typa:'success',
              message:'添加成功',
            })
            //  this.list=[]
              this.dialogVisible = false;
              this.getdat()
       }
         console.log(data)
      },
      handleSelectionChange(val){
        this.qwey=val
      },
       handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG) {k  
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },


      async getdat(){
          const {data=[]} = await shop()

          this.tableData = data.list
          console.log(this.tableData)
          
      },
      // 列表渲染
      getdat(){
        const params={
          Authorization:sessionStorage.getItem('token')
        }
          axios.get('http://estate.eshareedu.cn/estate/api/stores/list',{headers:params}).then(res=>{
            const {list}=res.data.data
            this.tableData=list
            console.log(list)
          })

      },
      selsChang(sels){
        this.sels = sels
      },
      // 批量删除
  deletInBatches(val){
    this.qwey = val
  },
async delects (){
  let self = this
  if(this.qwey.length == 0){
     this.$message({
       type:'waring',
       message:'勾选'
     })
  }else{
    let ids = []
    self.qwey.forEach((item)=>{
      ids.push(item.id)
    })
    let res = await delects({
      ids:ids
    })
    if(res.errCode=='10000'){
      this.getdat()
      this.$message({
        typa:'success',
        message:'唱功'
      })
    }
  }
},
      // 单删
      delect(val){
        const params={
        Authorization:sessionStorage.getItem('token'),
        }
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                 confirmButtonText: '确定',
                 cancelButtonText: '取消',
                 type: 'warning'
             }).then(() => {
                  axios.get('http://estate.eshareedu.cn/estate/api/stores/delete?id='+val,{headers:params}).then(res=>{
                 this.tableData=[]
               this.getdat()
           })
            this.$message({
               type: 'success',
             message: '删除成功!',
             });
           }).catch(() => {
             this.$message({
           type: 'info',
            message: '已取消删除'
         });
        });
            console.log(val);
      },
      // 分页
       handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      onSubmit() {
        console.log('submit!');
      },
    },
    mounted(){
      this.getdat()
    },
    
  }

</script>

<style>

.hrpoa{
  display: flex;
}
.imG{
  margin-left: 130px;
}


.porss{
  width: 200px;
}
.shijian{
  width: 290px;
  margin-left: 40px;
  margin-bottom: 25px;
}
.pors{
  width: 200px;
}
.top p {
  text-align: left;
  color: #427ff4;
}
.kuang {
  margin-top: 50px;
  margin-bottom: 30px;
  border: 1px solid #eee;
}
.examine {
  text-align: left;
}
.nav {
  width: 1600px;
  margin: auto;
}
.btn {
  text-align: left;
  margin-bottom: 20px;
}
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
